<template>
	<view class="viewimg">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<u-popup border-radius="10" v-model="show" 
					@close="close" @open="open" :mode="mode" 
					length="70%" :mask="mask"
					:closeable="closeable">
					<view class="wrap">
						<view class="top">
							<view class="item">
								<view class="left">开始时间</view>
								<input type="text" placeholder-class="line" @click="defaultTimeChangeS" v-model="starttime" placeholder="请选择开始时间" />
							</view>
							<view class="item">
								<view class="left">结束时间</view>
								<input type="text" placeholder-class="line" @click="defaultTimeChangeE" v-model="endtime" placeholder="请选择结束时间" />
							</view>
						</view>
						<view class="close-btn" v-if="mode != 'center'">
							<u-button size="medium" type="primary" @click="initData">搜索</u-button>
							<u-button size="medium" type="default" @click="close">取消</u-button>
						</view>
					</view>
				</u-popup>
					
				<u-picker
					:mode="pickermode"
					:defaultTime="starttime"
					v-model="pickershowS"
					:params="params"
					@confirm="confirmS"
					:defaultSelector="defaultSelector"
				></u-picker>
				<u-picker
					:mode="pickermode"
					:defaultTime="endtime"
					v-model="pickershowE"
					:params="params"
					@confirm="confirmE"
					:defaultSelector="defaultSelector"
				></u-picker>
			</view>
		</view>
		<view>
			<button @click="btnClick">搜索</button>
			<echarts :option="option" style="height: 300px;"></echarts>
			<view>
				<u-table :align="align" :borderColor="borderColor">
					<u-tr class="u-tr">
						<u-th width="50%" class="u-th">时间</u-th>
						<u-th width="50%" class="u-th u-th-upz">雨量(mm)</u-th>
					</u-tr>
					<u-tr class="u-tr" style="line-height: 25px;" v-for="(item,index) in result" :key="index" :class="'tr-color-' + index % 2">
						<u-td class="u-td" width="50%"><view class="u-font-14" >{{$u.timeFormat(formatTime.convertToDate(item.TM),'yyyy-mm-dd hh:MM')}}</view></u-td>
						<u-td class="u-td" width="50%"><view class="u-font-14" >{{ item.DRP }}</view></u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
	</view>
</template>

<script>
	import { getRainDetails } from './api/api.js'
	export default {
		data() {
			return {
				stcd: "",
				stnm: "",
				option: {},
				
				//搜索层
				show: false,
				mode: 'right',
				mask: true, // 是否显示遮罩
				closeable: false,
				
				//选择器
				pickershowS: false,
				pickershowE: false,
				starttime: '',
				endtime: '',
				pickermode: 'time',
				defaultSelector: [0],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
				},
				
				//table表格
				result: [],
				align: 'center',
				borderColor: '#e4e7ed',
			};
		},
		onLoad(options) {
			this.stcd = options.stcd;
			this.stnm = options.stnm;
			uni.setNavigationBarTitle({
				title: this.stnm + "柱状图"
			});
			uni.setNavigationBarColor({
				frontColor: "#ffffff", //文字颜色
				backgroundColor: "#0C52C4" //底部背景色
			})
			
		},
		mounted() {
			this.starttime =  new Date(new Date().addDate("d", -1)).Format("YYYY-MM-DD 08:00");
			this.endtime =  new Date(new Date().addDate("h", 0)).Format("YYYY-MM-DD hh:00");
			this.initData();
		},
		methods: {
			showRegionPicker() {
				this.show = true;
			},
			confirmS(e) {
				this.starttime = '';
				if (this.pickermode == 'time') {
					if (this.params.year) this.starttime += e.year;
					if (this.params.month) this.starttime += '-' + e.month;
					if (this.params.day) this.starttime += '-' + e.day;
					if (this.params.hour) this.starttime += ' ' + e.hour;
					if (this.params.minute) this.starttime += ':' + e.minute;
					if (this.params.second) this.starttime += ':' + e.second;
				}
			},
			confirmE(e) {
				this.endtime = '';
				if (this.pickermode == 'time') {
					if (this.params.year) this.endtime += e.year;
					if (this.params.month) this.endtime += '-' + e.month;
					if (this.params.day) this.endtime += '-' + e.day;
					if (this.params.hour) this.endtime += ' ' + e.hour;
					if (this.params.minute) this.endtime += ':' + e.minute;
					if (this.params.second) this.endtime += ':' + e.second;
				}
			},
			initData() {
				var data = {
					STIME: this.starttime,
					ETIME: this.endtime,
					STCD: this.stcd,
					DAYHOUR:"HOUR"
				};
				
				this.show = false;
				
				var _param = {}
				_param.data = data;
				getRainDetails(_param).then(res => {
					var listData = res.data;
					this.result = listData;
					
					var m = [];
					var strNote= [{"name": "时间","codename": "TM","tableV":"1","isShow":true,"width":"40%"},{"name": "雨量","codename": "DRP","tableV":"12","isShow":true,"width":"60%"}];
					//绘制过程线颜色设置
					var LineColor = ['#D84C29'];
					var strChartsName = "雨量";
					
					this.option = this.chartsUtils.chartYL(listData,strNote,LineColor,strChartsName);
					
				})
			},
			close() {
				this.show = false;
				// console.log('close');
			},
			open() {
				// console.log('open');
			},
			btnClick() {
				this.show = true;
			},
			defaultTimeChangeS(index) {
				this.pickermode = 'time';
				this.pickershowS = true;
			},
			defaultTimeChangeE(index) {
				this.pickermode = 'time';
				this.pickershowE = true;
			},
		}
	};
</script>
<style lang="scss" scoped>
	.viewimg {
		height: 100%;
		// background: #d1e9e9; 
	}
	
	.tr-color-0 {
		background: #fff;
	}
	.tr-color-1 {
		background: #f0f0f0;
	}
			
	.wrap {
		padding: 24rpx;
		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;
			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;
				.left {
					width: 180rpx;
				}
				input {
					text-align: left;
				}
			}
			
			.address {
				padding: 20rpx 0;
				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}
			.site-clipboard {
				padding-right: 40rpx;
				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;
					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	.close-btn {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.input {
		border: 1px solid $u-light-color;
		border-radius: 4px;
		margin-bottom: 20px;
		height: 30px;
		font-size: 26rpx;
		flex: 1;
	}
	
	.input-wrap {
		display: flex;
	}
</style>